云存储之上传图片和展示图片(小程序云开发) |
您所在的位置：网站首页 › 云端 图片 › 云存储之上传图片和展示图片(小程序云开发) |
云存储之上传图片和展示图片(小程序云开发)
|
1.云存储介绍
2.demo代码(上传图片/文件)
cloud.wxml 云存储 上传图片cloud.js
// miniprogram/pages/cloud/cloud.js const db = wx.cloud.database();//初始化数据库 Page({ /** * 页面的初始数据 */ data: { }, // 上传图片 upload() { // 1.选择图片 ,官方文档api // https://developers.weixin.qq.com/miniprogram/dev/api/media/image/wx.chooseImage.html wx.chooseImage({ count: 1,//当前图片选择个数, 小程序最多支持一下选择9张 sizeType: ['original', 'compressed'], //['源文件','压缩文件'] sourceType: ['album', 'camera'],//文件来源 ['相册','摄像头牌照'] success(res) { // tempFilePath可以作为img标签的src属性显示图片(图片临时路径) const tempFilePaths = res.tempFilePaths console.log(tempFilePaths) //tempFilePaths是数组 // 官方api https://developers.weixin.qq.com/miniprogram/dev/wxcloud/guide/storage/api.html wx.cloud.uploadFile({ //cloudPath: 'example.png', // 上传至云端的路径 //图片名字 先用时间戳代替了,看自己喜好 cloudPath: new Date().getTime()+'.png', filePath: tempFilePaths[0], // 小程序临时文件路径 success: res => { // 返回文件 ID console.log(res.fileID) db.collection('image').add({ data: { fileID: res.fileID } }).then(res=>{ console.log(res) }).catch(err=>{ console.error(err) }) }, fail: console.error }) } }) } }) 至此上传图片成功啦! 数据库里:
云存储里:
3.图片/文件 获取展示
云存储 图片展示 // 获取图片 并且展示 先获取当前用户登录的openid再去对应的 拿数据 getFile() { wx.cloud.callFunction({ name: 'login' }).then(res => { db.collection('image').where({ _openid:res.result.openid }).get().then(res2=>{ console.log(res2) this.setData({ images: res2.data }) }) }) }, 其中wx.cloud.callFunction({ name: 'login' }) login云函数自带的,直接拿来用,也可以自己写, 写完记得右键部署
效果:
4.图片/文件 下载
下载图片 //下载图片/文件 downloadFile(e) { // console.log(e.target.dataset.fileid) wx.cloud.downloadFile({ fileID: e.target.dataset.fileid, // 文件 ID success: res => { // 返回临时文件路径 console.log(res.tempFilePath) // 官方api保存图片到相册https://developers.weixin.qq.com/miniprogram/dev/api/media/image/wx.saveImageToPhotosAlbum.html // 保存图片到手机相册 wx.saveImageToPhotosAlbum({ filePath: res.tempFilePath, success(res) { wx.showToast({ title: '保存到手机成功', }) }, fail(err) { console.log(err) wx.showModal({ title: '提示', content: '需要您授权保存相册', showCancel: true,//是否显示取消按钮 success: res => { if (res.confirm) { console.log('用户点击确定') wx.openSetting({ success: res2 => { if (res2.authSetting['scope.writePhotosAlbum']) { wx.showModal({ title: '提示', content: '获取权限成功,再次点击图片即可保存', }) } }, fail: err2 => { console.log(err2) } }) } else if (res.cancel) { console.log('用户点击取消') } } }) } }) }, fail: console.error }) }, 我这边的设计, 用户拒绝授权相册, 再次点击 弹出 再次去授权, 比较人性
|
【本文地址】
今日新闻 |
推荐新闻 |